import React, { Component } from 'react'
import './index.css';
export default class Main extends Component {
    render() {
        //解构赋值
        let {todos} = this.props;
        return (
            <ul className="todo-main">
                {
                    todos.map(item => {
                        return <li key={item.id}>
                                    <label>
                                        <input type="checkbox" tid={item.id} 
                                            onChange={this.change}
                                             checked={item.done ? true : false} 
                                        />
                                        <span>{item.title}</span>
                                    </label>
                                    <button 
                                        className="btn btn-danger" 
                                        style={{display: item.done ? 'block' : 'none'}}
                                        onClick={this.del(item.id)}    
                                    >
                                        删除
                                    </button>
                                </li>
                    })
                }
            </ul>
        )
    }

    //改变状态的回调
    change = (e) => {
        //checked 标志 checkbox 元素是什么状态 如果为 true 选中状态, 如果是false则未选中状态
        // console.log(e.target.checked);
        //应该设置的状态
        let status = e.target.checked;
        //获取要改变任务的 id
        let id = Number(e.target.getAttribute('tid'));
        //修改状态
        this.props.checkTodo(id, status);
    }

    //删除某一个任务
    del = (id) => {
        //获取要删除任务的 id
        return () => {
            //删除指定的任务
            // ???
            this.props.delTodo(id);
        }
    }
}
